<template>
	<div class="container">
		<h1 style="font-family: '楷体';font-size: 45px;margin-top: -10px;margin-bottom: -1px;">目标列表</h1>
		<table class="data-table">
			<thead>
				<tr style="font-family: '楷体';font-size: 25px;">
					<th>制定目标日期</th>
					<th>目标内容</th>
					<th>具体的</th>
					<th>可衡量的</th>
					<th>可实现的</th>
					<th>相关性强的</th>
					<th>有时限的</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in paginatedItems" :key="item.id">
					<td style="line-height: 350%;text-align: center;font-weight: bold;font-size: 18px;">{{item.sj}}</td>
					<td><textarea v-model="item.nr" @blur="updateItem(item, 'nr')" class="editable-textarea"></textarea>
					</td>
					<td><textarea v-model="item.a" @blur="updateItem(item, 'a')" class="editable-textarea"></textarea>
					</td>
					<td><textarea v-model="item.b" @blur="updateItem(item, 'b')" class="editable-textarea"></textarea>
					</td>
					<td><textarea v-model="item.c" @blur="updateItem(item, 'c')" class="editable-textarea"></textarea>
					</td>
					<td><textarea v-model="item.d" @blur="updateItem(item, 'd')" class="editable-textarea"></textarea>
					</td>
					<td><textarea v-model="item.e" @blur="updateItem(item, 'e')" class="editable-textarea"></textarea>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="pagination">
			<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
			<span>当前页: {{ currentPage }} / {{ totalPages }}</span>
			<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
		</div>
	</div>
</template>
<script setup>
	import {
		wcao,
		post
	} from "@/http";
	import {
		ref,
		computed
	} from 'vue';

	const items = ref([]); // 用于存储所有学习项目
	const currentPage = ref(1);
	const itemsPerPage = ref(3); // 每页显示的项数

	const totalPages = computed(() => {
		return Math.ceil(items.value.length / itemsPerPage.value);
	});

	const paginatedItems = computed(() => {
		const start = (currentPage.value - 1) * itemsPerPage.value;
		const end = start + itemsPerPage.value;
		return items.value.slice(start, end);
	});

	const nextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++;
		}
	};

	const prevPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
		}
	};
	const getAllData = () => {
		// 实现新增逻辑
		post('/goalscon/getData', {}, (res) => {
			items.value = res;
		}, (res) => {
			ElMessage.warning(res.message)
		})
	};
	getAllData();
	const updateItem = (item, field) => {
		// 这里可以构建要发送的payload
		console.log(field)
		console.log(item[field])
		const payload = {
			id: item.id, // 要更新的项目ID
			lie: field,
			context: item[field] // 需要更新的字段
		};

		post('/goalscon/update', payload, (res) => {
			ElMessage.success(res);
		}, (res) => {
			ElMessage.warning(res);
		});
	};
</script>


<style scoped>
	.container {
		margin: 0 auto;
		font-family: Arial, sans-serif;
	}

	h1 {
		text-align: center;
	}

	.data-table {
		width: 100%;
		height: 600px;
		border-collapse: collapse;
		margin-bottom: 20px;
	}

	.data-table th,
	.data-table td {
		border: 1px solid #dddddd;
		text-align: center;
		padding: 8px;
	}

	.data-table th {
		background-color: #f2f2f2;
	}

	.data-table tr:nth-child(odd) {
		background-color: #deb887;
		/* 偶数行背景色 */
	}

	.data-table tr:nth-child(even) {
		background-color: #f6ffd8;
		/* 奇数行背景色 */
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	button {
		padding: 10px 15px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	button:disabled {
		background-color: #cccccc;
		cursor: not-allowed;
	}

	.editable-textarea {
		height: auto;
		/* 允许根据内容自动调整高度 */
		width: 100%;
		height: 100%;
		/* 使宽度自适应 */
		padding: 10px;
		/* 添加内边距，增加可触碰面积 */
		border: 2px solid #ccc;
		/* 边框颜色 */
		border-radius: 8px;
		/* 边框圆角 */
		background-color: #f9f9f9;
		/* 背景颜色 */
		color: #333;
		/* 字体颜色 */
		font-size: 16px;
		/* 字体大小 */
		transition: border-color 0.3s ease-in-out;
		/* 添加过渡效果 */
		box-sizing: border-box;
		/* 包含边框和内边距在内的宽度计算 */
		overflow: auto;
		/* 允许内容溢出滚动 */
		resize: none;
		/* 防止用户手动调整大小 */
	}

	/* 更新输入时如果需要 */
	.editable-textarea:focus {
		border-color: #4CAF50;
		/* 聚焦时边框颜色 */
		background-color: #ffffff;
		/* 聚焦时背景颜色 */
		outline: none;
		/* 去掉默认的焦点外边框 */
	}
</style>